<script setup>
import { ref,computed,onMounted } from 'vue'
import { addApproval,getApproveById,updateApproval } from '@/api/approval'
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/user';
import { useRouter, useRoute} from 'vue-router'
import { getLeaderList } from '@/api/user'
import Upload from '@/components/upload/index.vue'
const route =useRoute()
const router =useRouter()
const store = useUserStore()
const form = ref({


})
const roleId = ref(0)
// const deptId = ref(0)
const bmLeaderList = ref([])
const hrLeaderList = ref([])
const leaderList = ref([])


const isEditable = ref(false)
onMounted( async ()=>{
  console.log(store)
  roleId.value = store.roleId
  // deptId.value = store.deptId
  // console.log("deptId",deptId)
  form.value.reporterId = store.user.id
  form.value.reporterDeptId = store.user.deptId
  if(route.query&&route.query.applyId){
    let r = await getApproveById(route.query.applyId)
    form.value = r.data

     //单独给部门、人事、领导下拉框赋值中文
     form.value.approvalBmId = r.data.approvalBmName
    form.value.approvalHrId = r.data.approvalHrName
    form.value.approvalLeaderId = r.data.approvalLeaderName
    form.value.approvalFile = r.data.approvalFile

    if(route.query.types=='view'){
      //均不可编辑
      isEditable.value = true
    }else{
      isEditable.value = false
    }
  } else{
    form.value.reporterName = store.user.empName
    form.value.reporterDeptName = store.deptName
    
  }
  //获取部门领导
  let bmLeader = await getLeaderList({
    deptId:form.value.reporterDeptId,
    roleId:5
  })
  bmLeaderList.value = bmLeader.data.list
  
  //获取部门领导
  let hrLeader = await getLeaderList({
    roleId:4
  })
  hrLeaderList.value = hrLeader.data.list
  
  //获取部门领导
  let leader = await getLeaderList({
    roleId:2
  })
  leaderList.value = leader.data.list
})

const startTimes=ref()
const endTimes=ref()

const hasEndTime = ref(false)
form.value.approvalTime = computed(()=>{
  startTimes.value = new Date(form.value.startTime)
  endTimes.value = new Date(form.value.endTime)
  if(form.value.startTime!=null&&form.value.endTime!=null&&form.value.startTime!=''&&form.value.endTime!=''&&hasEndTime.value){
    console.log("form.value.startTime",form.value.startTime)
    console.log("form.value.endTime",form.value.endTime)
    if(endTimes.value-startTimes.value>0){
      return ((endTimes.value-startTimes.value) / (1000*60*60)).toFixed(1)
    }else{

      ///////
      // form.value.startTime=''
      // form.value.endTime=''
      console.log("---form.value.startTime",form.value.startTime)
    console.log("---form.value.endTime",form.value.endTime)
      ElMessage.error("结束时间必须大于开始时间")
    }
  }else{    
  }
})

const onSubmit = async () => {

  if(roleId.value === 6){
    //普通员工
    form.value.state=0
  }else if(roleId.value === 5){
    //部门领导
    form.value.state=1
  }else if(roleId.value === 4){
    //人事
    form.value.state=2
  }

  if(form.value.approvalTime!=null){
    if(route.query&&route.query.applyId){
      console.log('change!',form.value)
      let r = updateApproval(form.value)
      if(r.code==200){
        ElMessage.info("修改成功")
        router.push('/approval/personal')
      }else{
        ElMessage.info("修改失败")
      }  
      } else{
        console.log('submit!',form.value)
        let r = await addApproval(form.value)
        if(r.code==200){
          ElMessage.info("申请成功")
          router.push('/approval/personal')
        }else{
          ElMessage.info("申请失败")
        }
      } 
  }else{
    ElMessage.error("结束时间必须大于开始时间")
  }
  
}

const onCancel = ()=>{
  form.value = {}
  router.go(-1)
}

//上传组件的url值
const picUrl = ref()

const emitsPicUrl = (picUrl)=>{
  form.value.approvalFile=picUrl
}
</script>

<template>
  <el-form :model="form" label-width="auto" style="max-width: 650px;margin: 30px auto">
    <el-form-item label="申请人姓名"  >
      <el-input v-model="form.reporterName" :disabled="true"/>
    </el-form-item>
    <el-form-item label="申请人部门" >
      <!-- <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select> -->
      <el-input v-model="form.reporterDeptName" :disabled="true"/>
    </el-form-item>
    <el-form-item label="申请时间范围">
      <el-col :span="11">
        <el-date-picker
          v-model="form.startTime"
          type="datetime"
          placeholder="选择开始时间"
          style="width: 100%"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          :disabled="isEditable"
        />
      </el-col>
      <el-col :span="2" style="margin: auto;flex: 0">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          placeholder="选择结束时间"
          style="width: 100%"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          :disabled="isEditable"
          @blur="hasEndTime=true"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="请假时长(小时)"  >
      <el-input v-model="form.approvalTime" :disabled=true />
    </el-form-item>
    <el-form-item label="申请审批类型" >
      <el-select v-model="form.type" placeholder="" :disabled="isEditable">
        <el-option label="补卡" value=1 />
        <el-option label="事假" value=2 />
        <el-option label="年休" value=3 />
      </el-select>
    </el-form-item>
    <el-form-item label="相关证明文件" v-model="form.approvalFile"> <Upload @picUrl="emitsPicUrl"/> </el-form-item>
    <el-form-item label="选择部门领导" v-if="roleId>5" >
      <el-select v-model="form.approvalBmId" placeholder="" :disabled="isEditable">
        <el-option v-for="item of bmLeaderList" :key="item.id" :label="item.empName" :value="item.id"  />
      </el-select>
    </el-form-item>

    <el-form-item label="选择审批人事" v-if="roleId>4" >
      <el-select v-model="form.approvalHrId" placeholder="" :disabled="isEditable">
        <el-option v-for="item of hrLeaderList" :key="item.id" :label="item.empName" :value="item.id"  />
      </el-select>
    </el-form-item>

    <el-form-item label="选择审批领导" v-if="roleId>2" >
      <el-select v-model="form.approvalLeaderId" placeholder="" :disabled="isEditable">
        <el-option v-for="item of leaderList" :key="item.id" :label="item.empName" :value="item.id"  />
      </el-select>
    </el-form-item>
    
    <el-form-item style="margin: auto;">
      <el-button type="primary" @click="onSubmit" v-if="!isEditable">申请审批</el-button>
      <el-button @click="onCancel" v-if="!isEditable">取消</el-button>
    </el-form-item>
  </el-form>
</template>

